<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html >
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>消费者订单</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<link rel="stylesheet" type="text/css" href="res/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="res/css/bootstrap-responsive.min.css">
    <link rel="stylesheet" type="text/css" href="res/css/style.css">
    <script type="text/javascript" src="res/js/jquery-1.9.1.min.js"></script>

  </head>
  
  <body>
    
    <%@include file="../../template/header.jsp" %>
    
    <div class="subHead">
        <div class="container">
            <h1>商家管理后台</h1>
            <p class="lead">商家可以在此修改商品，修改商品类别，添加子店铺账户（总店管理员）等。</p>
        </div>
    </div>
    
    <div class="row mainContent">
        
        <%@include file="../../template/shopNav.jsp" %>
        
        <div class="span9">
        	<legend class="text-warning">客户订单列表</legend>
        	<table class="table table-striped table-hover">
                <thead>
	                <tr>
	                    <th>#</th>
	                    <th>订单号</th>
	                    <th>下单时间</th>
	                    <th>下单机器</th>
	                    <th>下单者</th>
	                    <th>订单总价</th>
	                    <th>操作</th>
	                </tr>
                </thead>
                <tbody>
               		<s:iterator value="#request.orders" id="order" status="statu">
               			<tr>
               				<td><s:property value="#statu.index + 1" /></td>
               				<td><s:property value="#order.orderNum" /></td>
               				<td><s:property value="#order.orderDate" /></td>
               				<td><s:property value="#order.machine.name" /></td>
               				<td><s:property value="#order.custom.username" /></td>
               				<td><s:property value="#order.totalPrices" /></td>
               				<td>
               					<a href="#" class="btn btn-mini" onclick="openDialog(<s:property value="#order.id" />);return false;">查看明细</a>
               					<a href="shop/addMyShopVip.htm?customId=<s:property value="#order.custom.id" />" class="btn btn-mini">成为会员</a>
               				</td>
               			</tr>
               		</s:iterator>
                </tbody>
                <tfoot>
                	<!-- <tr>
                		<td colspan="7">
                			<div class="pagination pagination-right">
						    	<ul>
								    <li><a href="#">Prev</a></li>
								    <li><a href="#">1</a></li>
								    <li><a href="#">2</a></li>
								    <li><a href="#">3</a></li>
								    <li><a href="#">4</a></li>
								    <li><a href="#">5</a></li>
								    <li><a href="#">Next</a></li>
							    </ul>
						    </div>
                		</td>
                	</tr> -->
                </tfoot>
             </table>
        </div>
    </div>
    
    <div class="footer">
        <p>版权所有： 银盒子计划团队</p>
    </div>
    
    <!-- Modal -->
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog">
    	<div class="modal-header">
    		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    		<h3 id="myModalLabel">订单商品明细</h3>
   		</div>
    	<div class="modal-body">
    		<table class="table table-striped table-hover">
    			<thead>
    				<tr>
    					<th>#</th>
    					<th>商品图片</th>
    					<th>商品名称</th>
    					<th>尺寸类型</th>
    					<th>购买数量</th>
    					<th>付款价格</th>
    				</tr>
    			</thead>
    			<tbody id="items">
    				
    			</tbody>
    		</table>
    	</div>
    	<div class="modal-footer">
		    <button class="btn btn-primary" onclick="closeDialog()">Close The Dialog</button>
   		</div>
    </div>

    <script type="text/javascript" src="res/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $('li[name=templateHeader]').each(function(){
	    	var that = $(this);
	    	that.removeClass("active");
	    });
		$("#templateHeader2").addClass("active"); 
		
		$('li[name=shopNav]').each(function(){
	        	var that = $(this);
	        	that.removeClass("active");
	    });
	    $("#shopNav7").addClass("active");  
	    
	    
	    function openDialog(orderId){
	    
	    	$('#myModal').on('show', function(){
	    		var that = $(this);
	    		var tbody = $('#items');
	    		var img = $('<img style="width:25px;height:36px;"></img>');
	    		var td = $('<td></td>');
	    		var tr = $('<tr></tr>');
	    		
	    		var obj = {
					orderId : orderId
				};
		    
		    	var params = decodeURIComponent($.param(obj, true));
	    		
	    		$.ajax({
	    			type: "post",
	    			url : "ajax/queryOrderItems.htm",
	    			dataType : "json",
	    			data : params,
	    			beforeSend: function(XMLHttpRequest){
						tbody.empty();
					},
			    	success: function(data, textStatus){
						var items = data.items;
						for(index = 0; index < items.length; index++){
							var item = items[index];
							var itemTr = tr.clone();
							
							var goodsIndexTd = td.clone();
							var goodsImageTd = td.clone();
							var goodsImageImg = img.clone();
							var goodsNameTd = td.clone();
							var goodsSizeTd = td.clone();
							var goodsCountTd = td.clone();
							var goodsPriceTd = td.clone();
							
							goodsIndexTd.text(index + 1);
							goodsImageImg.attr("src",item.goods.minImagePath);
							goodsImageTd.append(goodsImageImg);
							goodsNameTd.text(item.goods.name);		
							goodsSizeTd.text(item.type);
							goodsCountTd.text(item.buyConut);
							goodsPriceTd.text(item.buyPrice);
							
							itemTr.append(goodsIndexTd);
							itemTr.append(goodsImageTd);
							itemTr.append(goodsNameTd);	
							itemTr.append(goodsSizeTd);	
							itemTr.append(goodsCountTd);	
							itemTr.append(goodsPriceTd);
							
							tbody.append(itemTr);				
						}
					},
					complete : function(){
						$('#myModal').unbind("show");
					}
	    		});
	    	
	    	});
	    
	    	$('#myModal').modal({
	    		show : true
	    	});
    	
    	}
    	
    	function closeDialog(){
    		$('#myModal').modal('hide');
    	}
	    
    </script>
    
  </body>
</html>
